<template>
	<view>
		<!-- 自定义导航栏 -->
		<z-nav-bar transparentFixedFontColor="#000" type="transparentFixed" title="开通会员"></z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="h-bg" :style="'background-image: url('+headBgImg+');'">
			<view class="h-bg-cart">
				<view class="cart" :style="'background-image: url('+hBg+');'">
					<view class="flex j-between cart-1">
						<view class="cart-1-left">
							<image :src="userInfoData.avatar" mode=""></image>
						</view>
						<view class="cart-1-right">
							{{ userInfoData.vip_number || '暂未开通会员' }}
						</view>
					</view>
					<view class="flex align-item j-between cart-2">
						<view class="cart-2-left">
							{{  userInfoData.nickname || '' }}
						</view>
						<view class="cart-2-right">
							{{ userInfoData.is_vip == 1 && userInfoData.is_overdue == 1 ? '无限' : '总共' + noVipFrequency }}次
						</view>
					</view>
					<view class="flex align-item j-between cart-3">
						<view class="cart-3-left">
							{{ userInfoData.is_vip == 1 ? '有效期：' + userInfoData.expires_time : '充值会员寻找更多有缘人～' }}
						</view>
						<view class="cart-3-right">
							免费查看次数
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-title flex align-item j-between">
				<view class="main-title-left">
					充值购买
				</view>
				<view class="main-title-right flex align-item" @click="goRecord">
					<view class="main-title-right-tit">
						充值记录
					</view>
					<view class="main-title-right-icon">
						<image :src=" imgUrl + 'static/web/icon/me_lise_more.png'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="mian-list">
				
				<view class="item flex align-item j-between" :class="item.id == selectVipMenuId ? 'on-item' : ''" v-for="(item,index) in vipMenu" :key="index" @click="clickMenu(item.id)">
					<image class="tuijianicon" :src="imgUrl + 'static/web/icon/icon5.png'" mode="" v-if="item.is_recommend == 1"></image>
					<view class="item-left flex align-item">
						<view class="day">
							{{ item.days || 0 }}天
						</view>
						<view class="day-price">
							¥{{ item.unit_price }}/天
						</view>
					</view>
					<view class="item-right">
						¥{{ item.price || 0.00 }}
					</view>
				</view>
				
			</view>
		</view>
		<view class="invitation flex">
			<view class="invitation-com invitation-btn-on" v-if="selectVipMenuId != ''" @click="$u.throttle(openVip,1000)">
				立即开通
			</view>
			<view class="invitation-btn invitation-com" v-else>
				立即开通
			</view>
		</view>
		<view class="foot">
			<view class="foot-tit">
				会员特权
			</view>
			<view class="foot-list flex align-item">
				<view class="foot-list-item flex align-item column">
					<image class="foot-list-item-icon" :src="imgUrl + 'static/web/icon/icon1.png'" mode=""></image>
					<view class="foot-list-item-tit">
						无限次数
					</view>
				</view>
				<view class="foot-list-item flex align-item column">
					<image class="foot-list-item-icon" :src="imgUrl + 'static/web/icon/icon2.png'" mode=""></image>
					<view class="foot-list-item-tit">
						优先推荐
					</view>
				</view>
				<view class="foot-list-item flex align-item column">
					<image class="foot-list-item-icon" :src="imgUrl + 'static/web/icon/icon3.png'" mode=""></image>
					<view class="foot-list-item-tit">
						访问记录
					</view>
				</view>
				<view class="foot-list-item flex align-item column">
					<image class="foot-list-item-icon" :src="imgUrl + 'static/web/icon/icon4.png'" mode=""></image>
					<view class="foot-list-item-tit">
						专属服务
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	// #ifdef H5
	// import { wxPublicPay } from '@/config/html5Utils.js'
	// #endif
	import { setZhPay } from '@/config/utils.js'
export default {
	data() {
		return {
			imgUrl: this.$http.baseUrl, // 服务器域名
			headBgImg: this.$http.baseUrl + 'static/web/img/apply-bg.png', // 顶部背景
			hBg: this.$http.baseUrl + 'static/web/img/bg202203241830.png', // 内容背景
			vipMenu: [], // 存储会员菜单
			uid: '', // 存储用户id
			userInfoData: [], // 存储用户信息
			selectVipMenuId: '', // 存储选中的vip信息
			noVipFrequency: '', // 非会员浏览次数
		};
	},
	computed: {
		...mapState(['userInfo']),
	},
	onLoad(e) {
		var userInfo = this.$store.state.userInfo;
		this.uid = userInfo.uid
		this.getVipMenu()
		this.getMyInfo()
	},
	//页面显示
	onShow() {
		
	},
	onReady() {
		
	},
	// 触底触发
	onReachBottom() {
		
	},
	// 下拉刷新
	onPullDownRefresh(){
		
	},
	//方法
	methods: {
		// 获取会员菜单
		getVipMenu(){
			var that = this
			that.$http.get('api/VipSys/index').then(res=> {
				if(res){
					that.vipMenu = res.list
					that.noVipFrequency = res.no_vip_frequency
				}
			})
		},
		// 获取我的信息
		getMyInfo(){
			var that = this
			if(that.uid){
				that.$http.get('api/Member/view').then(res=> {
					that.userInfoData = res
				})
			}
		},
		// 选中vip菜单
		clickMenu(id){
			this.selectVipMenuId = id
		},
		// 开通会员
		openVip(){
			var that = this
			var type = ''
			// #ifdef MP-WEIXIN
			type = 'wx'
			// #endif
			// #ifdef APP-PLUS
			type = 'app'
			// #endif
			// #ifdef H5
			type = 'H5'
			if(this.isWxBrowser){
				type = 'H5-wx'
			}
			// #endif
			that.$http.post('api/ZhVipOrder/add',{'id': that.selectVipMenuId,'type': type }).then(res=> {
				
				if(res){
					setZhPay(res.paydata,()=>{
						that.getMyInfo()
						that.selectVipMenuId = ''
						uni.showToast({
							title:'充值会员成功',
							icon: 'none'
						})
					})
					// // #ifdef MP-WEIXIN
					// uni.requestPayment({
					// 	provider: 'wxpay',
					// 	timeStamp: res.paydata.timestamp,
					// 	nonceStr: res.paydata.nonceStr,
					// 	package: res.paydata.package,
					// 	signType: res.paydata.signType,
					// 	paySign: res.paydata.paySign,
					// 	success: function (res) {
					// 		that.getMyInfo()
					// 		that.selectVipMenuId = ''
					// 		uni.showToast({
					// 			title:'充值会员成功',
					// 			icon: 'none'
					// 		})
					// 	},
					// 	fail: function (err) {
					// 		console.log('fail:' + JSON.stringify(err));
					// 	}
					// });
					// // #endif
					
					// // #ifdef H5
					// if(this.isWxBrowser){
					// 	wxPublicPay(res.paydata,()=>{
					// 		that.getMyInfo()
					// 		that.selectVipMenuId = ''
					// 		uni.showToast({
					// 			title:'充值会员成功',
					// 			icon: 'none'
					// 		})
					// 	})
					// }else{
					// 	location.href = res.paydata + '&redirect_url=' + decodeURIComponent(location.href)
					// }
					// // #endif
				}
			})
		},
		// 前往充值记录
		goRecord(){
			uni.navigateTo({
				url: '/pages/my/record/record?type=2'
			})
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style>
page {
	background-color: rgba($color: #FFFFFF, $alpha: .6);
}
</style>
<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-item {
	align-items: center;
}
.j-between {
	justify-content: space-between;
}
.column {
	flex-direction: column;
}
.h-bg {
	width: 100%;
	padding: 190rpx 0 0;
	// #ifdef H5
	padding: 120rpx 0 0;
	// #endif
	.h-bg-cart {
		padding: 0 30rpx;
		background: linear-gradient(180deg, rgba(249, 249, 249, 0) 0%, #F9F9F9 50%);
		.cart {
			background-size: 100% 100%;
			box-shadow: 20rpx 20rpx 30rpx rgba($color: #7F5AFF, $alpha: .4);
			padding: 30rpx 40rpx 40rpx;
			border-radius: 24rpx;
			.cart-1 {
				margin-bottom: 30rpx;
				.cart-1-left {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					border: 2rpx solid #FFFFFF;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.cart-1-right {
					font-size: 32rpx;
					font-family: WeChat-Sans-Std-Medium, WeChat-Sans-Std;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			.cart-2 {
				margin-bottom: 8rpx;
				.cart-2-left {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.cart-2-right {
					font-size: 40rpx;
					font-family: WeChat-Sans-Std-Medium, WeChat-Sans-Std;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			.cart-3 {
				font-size: 24rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: rgba($color: #FFFFFF, $alpha: .6);
			}
		}
	}
}
.main {
	padding: 0 30rpx;
	.main-title {
		margin-top: 64rpx;
		.main-title-left {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #000013;
		}
		.main-title-right {
			.main-title-right-tit {
				font-size: 28rpx;
				font-weight: 400;
				color: #000013;
			}
			.main-title-right-icon {
				width: 11rpx;
				height: 20rpx;
				margin-left: 16rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.mian-list {
		.item {
			position: relative;
			padding: 40rpx 40rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 30rpx;
			box-sizing: border-box;
			.item-left {
				.day {
					font-size: 36rpx;
					font-family: WeChat-Sans-Std-Medium, WeChat-Sans-Std;
					font-weight: 600;
					color: #000013;
					margin-right: 34rpx;
				}
				.day-price {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #6A6A7E;
				}
			}
			.item-right {
				font-size: 38rpx;
				font-family: WeChat-Sans-Std-Medium, WeChat-Sans-Std;
				font-weight: 500;
				color: #7F5AFF;
			}
		}
		.tuijianicon {
			position: absolute;
			top: 0;
			left: -3rpx;
			width: 80rpx;
			height: 38rpx;
		}
		.on-item {
			border: 2rpx solid #7F5AFF;
		}
	}
}
.invitation {
	justify-content: center;
	margin-top: 30rpx;
	background-color: #FFFFFF;
	padding: 20rpx 0;
	.invitation-com {
		width: 82%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	.invitation-btn {
		background-color: #BEC6D3;
	}
	.invitation-btn-on {
		background: #7F5AFF;
	}
}
.foot {
	background-color: #fff;
	padding: 30rpx 30rpx 50rpx;
	margin-top: 30rpx;
	.foot-tit {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #000013;
		margin-bottom: 30rpx;
	}
	.foot-list {
		justify-content: space-around;
		.foot-list-item {
			.foot-list-item-icon {
				width: 74rpx;
				height: 74rpx;
			}
			.foot-list-item-tit {
				font-size: 26rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #000013;
				margin-top: 20rpx;
			}
		}
	}
}
</style>
